<script setup>
import api from '@/api/index.js'
import { message } from 'ant-design-vue';
import { computed, ref, h, provide } from 'vue';
import MyTable from '@/components/MyTable/MyTable.vue';
import { Modal } from 'ant-design-vue';
import { getConsants } from '@/utils'
import ImageView from '@/components/ImageView/ImageView.vue'

const props = defineProps({
  // 表格数据总条数
  total: { type: Number, default: 0 },
  // 表格当前页码
  pageNum: { type: Number, default: 1 },
})
// 分页参数
const pagination = computed(() => ({
  total: props.total,
  showSizeChanger: false,
  current: props.pageNum,
  onChange: e => { emits('pageChange', e) }
}))

const emits = defineEmits(['pageChange', 'edit', 'reload'])

// 表格列配置
const columns = ref([
  { ellipsis: true, title: '地块名称', dataIndex: 'landName', key: 'landName', },
  { ellipsis: true, title: '地块性质', key: 'landNature', },
  { ellipsis: true, title: '地块地址', dataIndex: 'landAddress', key: 'landAddress', },
  { ellipsis: true, title: '地块面积(亩)', dataIndex: 'landArea', key: 'landArea', },
  { ellipsis: true, title: '区域截取', key: 'positionImg' },
  { ellipsis: true, title: '地块属性', key: 'landAttribute', },
  { ellipsis: true, title: '是否被承包', key: 'isContract', },
  { ellipsis: true, title: '负责人', dataIndex: 'person', key: 'person', },
  { ellipsis: true, title: '负责时间', key: 'pickDate', },
  { ellipsis: true, title: '联系电话', dataIndex: 'personPhone', key: 'personPhone', },
  // { ellipsis: true, title: '所属合作社', dataIndex: 'deptName', key: 'deptName', },
  { ellipsis: true, title: '状态', key: 'status' },
  { ellipsis: true, title: '种植作物', key: 'plantType', },
  { ellipsis: true, title: '备注', dataIndex: 'remark', key: 'remark', },
  { ellipsis: true, title: '操作', key: 'set', width: '160px', align: 'center' },
])

// 编辑数据
const edit = (item) => {
  emits('edit', item)
}

//删除数据
const del = item => {
  Modal.warning({
    title: '删除地块',
    content: h('span', {}, '是否删除地块：',
      h('span', { style: { color: '#09c690' } }, item.landName),
    ),
    okText: '删除',
    okCancel: true,
    okButtonProps: { type: 'primary', danger: true },
    cancelButtonProps: { type: 'primary' },
    cancelText: '取消',
    onOk: async () => {
      await api.delMassif({ id: item.landId })
      message.success('删除成功');
      emits('reload')
      return Promise.resolve()
    },
    onCancel: () => {
      message.success('取消删除');
      return Promise.resolve()
    }
  });
}
provide('columns', columns.value)
</script>

<template>
  <MyTable :pagination="pagination" :scroll="{ y: 'calc(100vh - 383px)' }">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'pickDate'">
        {{ record.startDate }} - {{ record.endDate }}
      </template>
      <template v-if="column.key === 'isLease'">
        {{ record.isLease ? '是' : '否' }}
      </template>
      <template v-if="column.key === 'isContract'">
        {{ record.isContract === 1 ? '是' : '否' }}
      </template>
      <template v-if="column.key === 'landAttribute'">
        {{ getConsants('land_attribute', record.landAttribute) }}
      </template>
      <template v-if="column.key === 'landNature'">
        {{ getConsants('land_nature', record.landNature) }}
      </template>
      <template v-if="column.key === 'plantType'">
        {{ getConsants('plant_type', record.plantType) }}
      </template>
      <template v-if="column.key === 'status'">
        {{ getConsants('status', record.status) }}
      </template>
      <template v-if="column.key === 'positionImg' && record.positionImg">
        <ImageView :value="record.positionImg" />
      </template>
      <template v-if="column.key === 'set'">
        <AButton type="link" @click="edit(record)">编辑</AButton>
        <AButton type="link" class="com-delbtn" @click="del(record)">删除</AButton>
      </template>
    </template>
  </MyTable>
</template>